<template>
  <div>
<!-- {{$route.params.id}} -->
    <van-nav-bar
  :title="list.community"
  left-arrow
  @click-left="$router.back()"
/>
<!-- 图片 -->
<div class="img">
   <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item,index in list.houseImg" :key="index"><img :src="`http://liufusong.top:8080${item}`" alt=""></van-swipe-item>
    </van-swipe>
</div>
<h4>{{list.title}}</h4>
<van-tag type="success" class="suby" v-for="(item,index) in list.tags" :key="index" >{{item}}</van-tag>
<!-- 租金 -->
<div class="div"></div>
<div class="rep">
  <div >
    <h5>{{list.price}}</h5>
    <p>租金</p>
  </div>
  <div>
     <h5>{{list.roomType}}</h5>
    <p>房型</p>
  </div>
  <div>
     <h5>{{list.size}}平米</h5>
    <p>面积</p>
  </div>
</div>
<div class="div"></div>
<!-- 朝向楼层等 -->
<div class="beafuil">
<div>
  <p>装修：<span>精装</span></p>
  <p>楼层：<span>{{list.floor}}</span></p>
</div>
<div>
  <p>朝向：<span v-for="(item, index) in list.oriented" :key="index">{{item}}</span></p>
  <p>类型：<span>普通住宅</span></p>
</div>
</div>
<div class="mapimg">
  <p>{{list.community}}小区</p>
   <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" />
</div>
<!-- 房屋配套 -->
<div>
  <p style="margin-bottom:10px ">房屋配套</p>
  <div class="div" style="margin-top:10px"></div>
  <span v-for="(item ,index) in list.supporting" :key="index">{{item}}<img :src="`http://liufusong.top:8080${item}`" alt=""/></span>

</div>
<!-- 房源概括 -->
<div>
  <p style="margin:10px; color:#333" >房源概括</p>
    <div class="div"></div>
    <div class="avat">
      <div class="avat_left">
        <div class="avat_left_img"><img src="http://liufusong.top:8080/img/avatar.png" alt="" /></div>
        <div class="avat_left_text">
          <p>王女士</p>
          <p style="font-size: 12px;
    color: #fa5741">已认证</p>
        </div>
      </div>
      <div class="avat_right">发消息</div>
    </div>
</div>
 <div id="miaoshu">
      {{list.description
}}
      </div>
<!-- 猜你喜欢 -->
<div class="gess">
  <p>猜你喜欢</p>
  <div class="div"></div>
  <ListI v-for="item,index in likelist" :key="index" :item="item">
      <div class="div"></div>
  </ListI>
</div>
<!-- footer -->
<div class="footer">
  <div @click.stop="love">
    <!-- 是true显示第一个，否则第二个 -->
    <van-icon name="star-o" v-if="!favorites" />
     <van-icon name="star" v-else color="#fc5430" />
    收藏</div>
  <div>在线资讯</div>
  <div class="three">电话预约</div>
</div>
  </div>
</template>

<script>
import { Housedetail } from '@/api/house'
import { addlove, getcollect, deletelove } from '@/api/user'
import ListI from '@/components/ListI.vue'
export default {
  components: {
    ListI
  },
  data () {
    return {
      favorites: false,
      list: {},
      likelist: [{
        desc: '/123//金沙雅苑(二期)',
        houseCode: 'fe9668a5-87eb-ed92',
        houseImg: '/img/message/1.png',
        price: 11111,
        tags: ['近地铁'],
        title: '金沙雅苑(二期)'
      }, {
        desc: '/123//金沙雅苑(二期)',
        houseCode: 'fe9668a5-87eb-ed92',
        houseImg: '/img/message/2.png',
        price: 11111,
        tags: ['近地铁'],
        title: '金沙雅苑(二期)'
      }, {
        desc: '/123//金沙雅苑(二期)',
        houseCode: 'fe9668a5-87eb-ed92',
        houseImg: '/img/message/3.png',
        price: 11111,
        tags: ['近地铁'],
        title: '金沙雅苑(二期)'
      }],
      center: { lng: 0, lat: 0 },
      zoom: 3,

      flag: false,
      show: false

    }
  },
  async  created () {
    const res = await Housedetail(this.$route.params.id)
    // console.log(res)
    this.list = res.body
  },
  methods: {
    handler ({ BMap, map }) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 11
    },
    async love (e) {
      // 查看收藏
      const kan = await getcollect(this.$route.params.id)
      console.log(kan)
      if (this.favorites) {
        await deletelove(this.$route.params.id)
        this.favorites = false
        this.$toast.success({
          message: '取消收藏'
        })
      } else {
        await await addlove(this.$route.params.id)
        this.favorites = true
        this.$toast.success({
          message: '收藏成功'
        })
      }
    }
  }
}

</script>

<style lang="less" scoped>
.active{
  color: #33be85;
}
*{
  margin: 0;
  padding: 0;
}
.img{
  width: 375px;
  height:252px ;
  img{
    width: 100%;
    height: 251px;
  }
}
.rep{
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  padding: 10px 0;
  div h5{
    color: red;
    font-size: 18px;
  }

  div p{
    font-size: 14px;
    color: #999;
    margin-top: 5px;
  }

}
 .beafuil{
   display: flex;
    justify-content: space-between;
    padding: 10px 50px 5px 10px;
    div p{
      padding: 3px;
    }
  }
  .div{
    border: 1px solid gainsboro;
  }
  .suby{
    margin: 10px 5px 10px ;
  }
  h4{
    margin: 6px 5px 10px ;
  }
  //有头像的地方
.avat{
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  .avat_left{
  display: flex;
  justify-content: space-between;
  .avat_left_img img{
    width: 60px;
    height: 60px;
  }
   .avat_left_text{
   padding-left: 10px;
  }
  }
.avat_right{
  text-align: center;
  width: 50px;
  height: 30px;
  line-height: 30px;
      color: #33be85;
    border: 1px solid #33be85;
    border-radius: 3px;
}
}
.footer{
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  height: 50px;
  line-height: 50px;
  width: 100%;
  color: #999;

   .three{
    background-color:green;
    color: #cecece;
   }
  div{
   border: 1px solid #cecece;;
   width: 33.3%;
  }
  #miaoshu {
  font-size: 14px;
  color: #333333;
  height: 132px;
  padding: 20px 0;
}
}
.map {
  width: 100%;
  height: 200px;
}
.mapimg p{
  margin: 10px;
}

</style>
